<template>
  <el-table-column :label="data.label" align="center" v-if="data.children && data.children.length > 0">
    <template v-for="children in data.children">
      <ElTableColumnBox :data="children" :search="search" @changeBtn="changeBtn" @clickHeadBtn="clickHeadBtn">
        <template #[key]="{ row, index }" v-for="(slot, key) in $slots" :key="key">
          <slot :name="key" :row="row" :index="index" />
        </template>
      </ElTableColumnBox>
    </template>
  </el-table-column>
  <el-table-column :prop="data.prop" resizable :show-overflow-tooltip="!!!data.tooltip && !data.formType"
    :label="data.label" :sortable="data.sortable" :min-width="160" :width="data.width" :align="data.align"
    :fixed="data.fixed" v-else>
    <template #header>
      <div class="columnHead" :class="{
        'text-color-primary': search && search.queryDataBaseFiled === data.prop
      }" @click="headerClick(data)" @dblclick="handleDoubleClick(data)">
        <el-icon v-if="data.isCanSearch">
          <CaretRight />
        </el-icon>
        <template v-if="!!data.formType && !disabled">
          <span v-if="!!data.formProp" class="text-color-error">*</span>
          <el-icon>
            <Edit />
          </el-icon>
        </template>
        <h3>{{ data.label }}</h3>
      </div>
    </template>
    <template #default="scope"
      v-if="$slots[data.templateName || data.prop] || data.slot || data.formType || data.options || data.optionsRow || data.label.includes('日期') || typeof data.value === 'function'">
      <slot :name="data.templateName || data.prop" :row="scope.row" :index="scope.$index" v-if="$slots[data.templateName || data.prop]" />
      <template v-else-if="typeof data.slot === 'function'">
        {{ data.slot(scope.row, scope.$index) }}
      </template>
      <template v-else-if="data.formType">
        <ElFormItemBox label="" class="wAuto" :prop="`${data.formProp}[${scope.$index}].${data.formKey || data.prop}`"
          :isRules="typeof data.isRules === 'function' ? data.isRules(scope.row) : !!data.formProp">
          <template v-if="['textarea', 'text'].includes(data.formType)">
            <ElInputBox :data="scope.row" :dataName="data.prop" @changeBtn="(value: any, row: any) => {
              changeBtn(value, scope.row, [], scope.$index)
            }"
              :disabled="typeof data.disabled === 'function' ? data.disabled(scope.row, scope.$index) : disabled || data.disabled" />
          </template>
          <template v-else-if="data.formType === 'number'">
            <ElNumberBox :data="scope.row" :dataName="data.prop" @changeBtn="changeBtn"
              :disabled="typeof data.disabled === 'function' ? data.disabled(scope.row, scope.$index) : disabled || data.disabled" />
          </template>
          <template v-else-if="data.formType === 'switch'">
            <div class="flex-center-center flexAuto">
              <ElSwitchBox :data="scope.row" :dataName="data.prop" v-bind="data.formBind" @changeBtn="changeBtn"
                :disabled="typeof data.disabled === 'function' ? data.disabled(scope.row, scope.$index) : disabled || data.disabled" />
            </div>
          </template>
          <template v-else-if="data.formType === 'day'">
            <ElDayBox :data="scope.row" :dataName="data.prop" v-bind="data.formBind" @changeBtn="changeBtn"
              :disabled="typeof data.disabled === 'function' ? data.disabled(scope.row, scope.$index) : disabled || data.disabled" />
          </template>
          <template v-else-if="data.formType === 'dayTime'">
            <ElDayTimeBox :data="scope.row" :dataName="data.prop" v-bind="data.formBind" @changeBtn="(...args: any[]) => {
              changeBtn(args[0], args[1], [], scope.$index)
            }"
              :disabled="typeof data.disabled === 'function' ? data.disabled(scope.row, scope.$index) : disabled || data.disabled" />
          </template>
          <template v-else-if="data.formType === 'cascader'">
            <ElCascaderBox :data="scope.row" :dataName="data.dataName" :labelName="data.labelName"
              :valueName="data.valueName" v-bind="data.formBind" :options="data.options" @changeBtn="(...args: any[]) => {
                changeBtn(args[0], args[1], [], scope.$index)
              }"
              :disabled="typeof data.disabled === 'function' ? data.disabled(scope.row, scope.$index) : disabled || data.disabled" />
          </template>
          <template v-else-if="data.formType === 'select' && (data.options || isArr(scope.row[data.optionsRow]))">
            <ElSelectBox :data="scope.row" :dataName="data.prop"
              :options="data.optionsRow ? scope.row[data.optionsRow] : typeof data.options === 'function' ? data.options(scope.row) : data.options"
              :labelName="data.labelName" :valueName="data.valueName" :rowIndex="scope.$index" @changeBtn="(...args: any[]) => {
                changeBtn(args[0], args[1], args[2], scope.$index)
              }"
              :disabled="typeof data.disabled === 'function' ? data.disabled(scope.row, scope.$index) : disabled || data.disabled" />
          </template>
          <template v-else-if="data.formType === 'good'">
            <SelectGood :code="scope.row[data.prop]" :data="scope.row" :goodKey="data.goodKey" />
          </template>
        </ElFormItemBox>
      </template>
      <template v-else-if="typeof data.value === 'function'">
        {{ data.value(scope.row) }}
      </template>
      <template v-else-if="data.label.includes('日期')">
        {{ setDay(scope.row, data.prop) }}
      </template>
      <template v-else-if="(data.options || data.optionsRow)">
        <div class="flex-center-center" v-if="data.isTag">
          <ElTagBox :data="scope.row[data.prop]"
            :options="typeof data.options === 'function' ? data.options(scope.row) : data.options" />
        </div>
        <template v-else>
          {{ arrFind(data.optionsRow ? scope.row[data.optionsRow] : typeof data.options === 'function' ?
            data.options(scope.row) : data.options, scope.row[data.prop], data.valueName
          || 'value',
            data.labelName || 'label') }}
        </template>
      </template>
    </template>
  </el-table-column>
</template>
<script setup lang="ts">
//获取当前实例
import { getCurrentInstance, onMounted, ref } from 'vue';
import { arrFind, isArr } from '../../utils/componen';
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data?: any; //主数据
    search?: any; //搜索
    disabled?: boolean; //是否
  }>(),
  {},
);
let clickTimer: any = null;
const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', value: any, row: any, option: any, rowIndex?: number): void;
  (event: 'clickHeadBtn', row: any): void;
}>();
const setDay = (row: any, rowKey: any) => {
  return row[rowKey] ? proxy.$day(row[rowKey]) : '--'
};
const changeBtn = (value: any, row: any, option: any, rowIndex?: number) => {
  if (proxy.$isFunction(props.data.changeBtn)) {
    props.data.changeBtn(value, row, option, rowIndex)
  }
  emit('changeBtn', value, row, option, rowIndex)
};
//表头-单击 复制标题
const headerClick = (row: any) => {
  // 清除之前的定时器
  clearTimeout(clickTimer);
  // 设置一个新的定时器，在一定时间后执行单击逻辑
  clickTimer = setTimeout(() => {
    proxy.$com.copyText(row.label, false);
    clickHeadBtn(row)
  }, 300); // 延迟时间可以根据需要调整
};
//表头-双击 复制key
const handleDoubleClick = (row: any) => {
  clearTimeout(clickTimer);
  clickHeadBtn(row)
  proxy.$com.copyText(row.prop, false);
};
//表头-双击 复制key
const clickHeadBtn = (row: any) => {
  emit('clickHeadBtn', row)
};
</script>
<style scoped lang="scss">
.columnHead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  h3 {
    font-size: 12px;
  }

  >* {
    &:not(:last-child) {
      margin-right: 6px;
    }
  }
}
</style>
